
let ret=document.querySelector('.return')
let shu=1
let xhr=new XMLHttpRequest()
xhr.open('get','http://chst.vip:1234/api/getcategorybyid?categoryid='+localStorage.getItem('categoryId'),true)
xhr.onload=function(){
    if(xhr.status===200){
        let res =JSON.parse(xhr.responseText)
        let an=res.result
        let lis=''
        an.forEach(item => {
            lis+=`
            <a href="">首页></a>
            <a href="http://127.0.0.1:5500/js/day18/html/search.html">全部分类></a>
            <a href="">${item.category}</a>
            <p>筛选</p>
            `
        });
        ret.innerHTML=lis
    }
}
xhr.send(null)

let ul=document.querySelector('.main ul')
let select=document.querySelector('.choose select')
// http://chst.vip:1234/api/getproductlist?categoryid=${localStorage.getItem('categoryId')}&pageid=1
let xhr1=new XMLHttpRequest()
xhr1.open('get',`http://chst.vip:1234/api/getproductlist?categoryid=${localStorage.getItem('categoryId')}`,true)
xhr1.onload=function(){
    if(xhr1.status===200){
        let res1 =JSON.parse(xhr1.responseText)
        let an1=res1.result
        let lis=''
        res1.result.forEach(item=>{
            lis+=`
            <li productId=${item.productId} brandName=${item.brandName}>
           
                ${item.productImg}
                <div class="zi">
                    <p>${item.productName}</p>
                    <p>${item.productPrice}</p>
                    <p>${item.productQuote}</p>
                    <i class="iconfont icon-xinxi">${item.productCom}</i>
                </div>
           
        </li>
            `
        })
        ul.innerHTML=lis 

        let pag=Math.ceil(res1.totalCount/10)
        las=''
        for(var i=1;i<=pag;i++){
            las+=`
            <option value="${i}">${i}/${pag}</option>
            `
        }
        select.innerHTML=las
        select.pag=pag
    }
}
xhr1.send(null)


let before=document.querySelector('.choose .before')
let after=document.querySelector('.choose .after')
// 给点击下一页绑定事件
after.onclick=function(){
    shu++
    if(shu>select.pag){
        shu=select.pag
    }
    console.log(shu);
    let xhr =new XMLHttpRequest()
    xhr.open('get',`http://chst.vip:1234/api/getproductlist?categoryid=${localStorage.getItem('categoryId')}&pageid=${shu}`,true)
    xhr.onload=function(){
        if(xhr.status===200){
            let res =JSON.parse(xhr.responseText)
            let an=res .result
            let lis=''
            res.result.forEach(item=>{
                lis+=`
                <li productId=${item.productId} brandName=${item.brandName}>
               
                    ${item.productImg}
                    <div class="zi">
                        <p>${item.productName}</p>
                        <p>${item.productPrice}</p>
                        <p>${item.productQuote}</p>
                        <i class="iconfont icon-xinxi">${item.productCom}</i>
                    </div>
               
            </li>
                `
            })
            ul.innerHTML=lis 
            let option=document.querySelectorAll('option')
            option[shu-1].selected=true
        }
    }
    xhr.send(null)
    }


// 给点击上一页绑定事件
before.onclick=function(){
    shu--
    if(shu<0){
        shu=0
    }
    console.log(shu);
    let xhr =new XMLHttpRequest()
    xhr.open('get',`http://chst.vip:1234/api/getproductlist?categoryid=${localStorage.getItem('categoryId')}&pageid=${shu}`,true)
    xhr.onload=function(){
        if(xhr.status===200){
            let res =JSON.parse(xhr.responseText)
            let an=res .result
            let lis=''
            res.result.forEach(item=>{
                lis+=`
                <li productId=${item.productId} brandName=${item.brandName}>
                
                    ${item.productImg}
                    <div class="zi">
                        <p>${item.productName}</p>
                        <p>${item.productPrice}</p>
                        <p>${item.productQuote}</p>
                        <i class="iconfont icon-xinxi">${item.productCom}</i>
                    </div>
                
            </li>
                `
            })
            ul.innerHTML=lis 
            let option=document.querySelectorAll('option')
            option[shu-1].selected=true
        }
    }
    xhr.send(null)
    }



// 给页数绑点点击事件
select.onclick=function(e){
    var e=e || window.event
    var target=e.target || e.srcElement
    shu=target.value

let xhr =new XMLHttpRequest()
xhr.open('get',`http://chst.vip:1234/api/getproductlist?categoryid=${localStorage.getItem('categoryId')}&pageid=${shu}`,true)
xhr.onload=function(){
    if(xhr.status===200){
        let res =JSON.parse(xhr.responseText)
        let an=res .result
        let lis=''
        
        res.result.forEach(item=>{
            lis+=`
            <li productId=${item.productId} brandName=${item.brandName}>
                ${item.productImg}
                <div class="zi">
                    <p>${item.productName}</p>
                    <p>${item.productPrice}</p>
                    <p>${item.productQuote}</p>
                    <i class="iconfont icon-xinxi">${item.productCom}</i>
                </div>
          
        </li>
            `
        })
        ul.innerHTML=lis
        let option=document.querySelectorAll('option')
        option[shu-1].selected=true

    }
}
xhr.send(null)
}

ul.onclick=function(e){
    var e=e || window.event
    var target=e.target || e.srcElement
    if(target.nodeName==='IMG' || target.nodeName==='DIV'){
        localStorage.setItem('productid',target.parentNode.getAttribute('productId'))
        localStorage.setItem('brandName',target.parentNode.getAttribute('brandName'))
        location.href = 'http://127.0.0.1:5500/js/day18/html/buy.html';
    }else {
        localStorage.setItem('productid',target.parentNode.parentNode.getAttribute('productId'))
        localStorage.setItem('brandName',target.parentNode.parentNode.getAttribute('brandName'))
        location.href = 'http://127.0.0.1:5500/js/day18/html/buy.html';
    }
}